<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

        }



        #Nbaplayer {

            width: 250px;           

            margin: auto;

        }



        #curry,

        #abc {

            height: 178px;

            width: 112px;

            border:rgba(0, 0, 0, 0.12) solid 1px;

            float: left;

            margin: 5px;

        }

        .teamimg{

          width: 16px;

          height: 16px;  

        }

        #curryimg,#curry{

          border-radius: 10px;

          text-align: center;

          

        }

        .name{

            font-size: 14px;

        }

        .type,.team{

           font-size: 12px;

           color: #70757a;

        }

        #abcimg,#abc{

            border-radius: 10px;

            text-align: center;

        }

    </style>

</head>



<body>

    <div id=Nbaplayer>

        <div id="curry">

            <img src="img/curryImg.jpg" alt="库里图片" id="curryimg">

            <br>

            <span class="name"></span><br>

            <span class="type"></span><br>

            <img src="" alt="" class="teamimg">

             <span class="team"></span>

        </div>

        <div id="abc">

            <img src="" alt="字母哥图片" id="abcimg"><br>

            <span class="name"></span><br>

            <span class="type"></span><br>

            <img src="" alt="" class="teamimg">

            <span class="team"></span>

        </div>

    </div>

    <script>

        function Star(name,type,team,personImg,teamImg){

            this.name=name;

            this.type=type;

            this.team=team;

            this.personImg=personImg;

            this.teamImg=teamImg;

            

        }

        var curry=new Star('curry','控球后卫','金州勇士','img/curryImg.jpg','img/curryTeamImg.png');

        var curryImgItem=document.getElementById('curryimg');

        curryImgItem.scr=curry.personImg;

        var nameArr=document.getElementsByClassName('name');

        var curryname=nameArr[0];

        curryname.innerHTML=curry.name;

        var typeArr=document.getElementsByClassName('type');

        var currytype=typeArr[0];

        currytype.innerHTML=curry.type;

        var teamimgArr=document.getElementsByClassName('teamimg');

        var curryteamimg=teamimgArr[0];

        curryteamimg.src=curry.teamImg;

        var teamArr=document.getElementsByClassName('team');

        var curryteam=teamArr[0];

        curryteam.innerHTML=curry.team;

        var abc=new Star('abc','前锋','密尔沃基雄鹿','img/abcImg.jpg','img/abcTeamImg.png');

        var abcImgItem=document.getElementById('abcimg');

        abcImgItem.src=abc.personImg;

        var nameArr=document.getElementsByClassName('name');

        var abcname=nameArr[1];

        abcname.innerHTML=abc.name;

        var typeArr=document.getElementsByClassName('type');

        var abctype=typeArr[1];

        abctype.innerHTML=abc.type;

        var teamimgArr=document.getElementsByClassName('teamimg');

        var abcteamimg=teamimgArr[1];

        abcteamimg.src=abc.teamImg;

        var teamArr=document.getElementsByClassName('team');

        var abcteam=teamArr[1];

        abcteam.innerHTML=abc.team;



    </script>

</body>



</html>

